<template>
  <div class="AddOrUpdate_main add_container column_two">
    <div class="main_main">
      <el-form ref="form" :model="formData" :rules="rules" :inline="true">
        <el-form-item label="审批表单" prop="code">
          <el-input v-model="formData.code" disabled />
        </el-form-item>

        <!-- <el-form-item label="驳回类型" prop="reject">
          <el-select v-model="formData.reject" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item> -->
        <el-form-item label="备注" class="double">
          <el-input
            v-model="formData.remark"
            maxlength="200"
            show-word-limit
            type="textarea"
            placeholder="请输入"
          />
        </el-form-item>
        <el-form-item label="状态">
          <el-radio-group v-model="formData.status">
            <el-radio label="1">启用</el-radio>
            <el-radio label="0">停用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div class="formItem_header">
        <div>审批流程</div>
        <div class="formItem_header_operate">
          <a v-if="!formData.saleOrderCode" class="formItem_header_operate_item" @click="add">
            <svg-icon icon-class="新增" />
            <div class="item_name">添加</div>
          </a>
          <a class="formItem_header_operate_item delete" @click="remove1">
            <svg-icon icon-class="删除" />
            <div class="item_name">删除</div>
          </a>
        </div>
      </div>
      <div ref="table_container2" class="table_container draggableTable">
        <el-table
          ref="table"
          :data="tableData"
          :header-cell-class-name="headerCellClassName"
          stripe
          border
          style="width: 99.9%"
          @selection-change="selectionChange1"
        >
          <el-table-column type="selection" align="center" />
          <el-table-column label="审批部门">
            <template slot-scope="scope">
              <el-input v-model="scope.row.deptName" placeholder="请输入" clearable />
            </template>
          </el-table-column>
          <el-table-column label="审批人员" prop="userId">
            <template slot-scope="scope">
              <el-select v-model="scope.row.userId" placeholder="请选择">
                <el-option
                  v-for="item in peopleList"
                  :key="item.userId"
                  :label="item.realName"
                  :value="item.userId"
                />
              </el-select>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="main_bottom">
      <el-button type="cancel" @click.stop="cancel">取消</el-button>
      <el-button @click.stop="onSubmit">保存</el-button>
    </div>
  </div>
</template>

<script>
import { addOrUpdate, getInfo } from '@/api/system/approvalSettings'
import { list } from '@/api/system/user'
export default {
  name: 'AddOrUpdate',
  props: {
    layerid: {},
    id: {},
    defaultValue: {}
  },
  data() {
    return {
      formData: {
        id: '',
        code: '',
        reject: '',
        remark: '',
        status: '1',
        details: []
      },
      options: [
        { value: '1', label: '驳回一级' },
        { value: '2', label: '驳回全部' }
      ],
      peopleList: [],
      tableHeight: '250',
      userOptions: [],
      equipmentList: [],
      selectionsAll1: [],
      ids: [],
      roleOptions: [],
      selectionsAll: [], // 表格所有页选中的行
      inx: 1,
      tableData: [],
      listData: [],
      rules: {
        code: [
          { required: true, message: '审批表单不能为空', trigger: 'blur' }
        ],
        reject: [
          { required: true, message: '驳回类型不能为空', trigger: 'change' }
        ]
      }
    }
  },
  created() {
    if (!this.id) { // 没有id就是新增
    } else { // 有id就是编辑
      this.getInfo()
    }
  },
  mounted() {
    this.getUserList()
  },
  methods: {
    headerCellClassName(data) {
      if (['userId'].indexOf(data.column.property) != -1) {
        return 'column_bt'
      }
    },
    getUserList() {
      list({ status: '1' }).then(res => {
        this.peopleList = res.data
        console.log(res)
      })
    },
    selectionChange1(rows) {
      this.selectionsAll1 = rows
    },
    getInfo() {
      getInfo(this.id).then(res => {
        Object.keys(this.formData).forEach(key => { // 给右边数据赋值
          this.formData[key] = res.data[key]
        })
        this.tableData = this.formData.details
      })
    },
    remove1() {
      this.selectionsAll1.forEach(item => {
        this.tableData.splice(this.tableData.indexOf(item), 1)
      })
    },
    add() {
      this.tableData.push({ deptName: '', userId: '' })
    },
    onSubmit() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.formData.details = JSON.parse(JSON.stringify(this.tableData))
          this.formData.details.forEach((item, index) => {
            item['taskNo'] = index + 1
          })
          if (this.formData.details.filter(item => !item.deptName).length > 0) {
            this.$message.warning('审批部门不能为空')
            return
          } else if (this.formData.details.filter(item => !item.userId).length > 0) {
            this.$message.warning('审批人员不能为空')
            return
          } else if (this.formData.details.length == 0) {
            this.$message.warning('审批明细不能为空')
            return
          } else {
            addOrUpdate(this.formData).then(res => {
              this.$message({
                message: res.msg,
                type: 'success'
              })
              this.$layer.close(this.layerid) // 关闭弹框
              this.$parent.refresh() // 调用父组件的刷新方法
            })
          }
        }
      })
    },
    cancel() {
      this.$layer.close(this.layerid)// 关闭弹框
    }
  }
}
</script>

<style lang="less" scoped>
</style>
